<template>
  <view class="container">
    <view class="center-box">
      <view
        class="list"
        v-for="(item, index) in recArticle.articleList"
        :key="index"

      >
        <view
          class="item"
          @click="$emit('gotoUrl', { list: recArticle.articleList, item,index })"
          :data-spmCntSuffix="`ChatAiPage.message@2.article`"
          :data-custom="index + 1"
          :data-spm="item"
        >
          <img
            class="cover-img"
            :src="item.coverImageUrl"
            mode="aspectFill"
            alt=""
            srcset=""
          />
          <view class="info">
            <view class="source omit2">
              <text class="name">{{ item.articleTitle }}</text>
            </view>
            <view>
              <img
                class="source-icon"
                :style="
                  'width:' +
                  item.sourceIconWidth +
                  'rpx;' +
                  'height:' +
                  item.sourceIconHeight +
                  'rpx'
                "
                :src="item.sourceIcon"
                mode="scaleToFill"
              />
            </view>
            <view class="tag-list">
              <text
                class="tag"
                v-for="(tag, index) in item.tagList"
                :key="index"
                >{{ tag }}</text
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    recArticle: {
      type: Object,
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .list {
    position: relative;
    width: 454rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 10rpx;
    margin: 10rpx auto;
    .item {
      display: flex;

      .cover-img {
        width: 114rpx;
        height: 114rpx;
        border-radius: 10rpx;
      }
      .info {
        flex: 1;
        margin-left: 15rpx;
        .source {
          display: flex;
          margin-bottom: 8rpx;
          .name {
            flex: 1;
            height: 28rpx;
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #4d566a;
            line-height: 28rpx;
            word-break: break-all;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            overflow: hidden;
          }
        }
        // .source-icon {
        //   margin-bottom: 4rpx;
        // }
        .tag-list {
          margin-top: 8rpx;
          display: flex;
          flex-wrap: wrap;
          .tag {
            box-sizing: content-box;
            height: 28rpx;
            justify-content: end;
            font-size: 20rpx;
            padding: 4rpx 12rpx;
            margin-right: 10rpx;
            background: #f6f6f9;
            border-radius: 14rpx;
            font-weight: 500;
            color: $sl-color-grey;
          }
        }
      }
    }
  }
}
</style>
